import { Button, Form, FormInstance, Input, Select, Space } from 'antd'
import { useEffect, useState } from 'react'
import './index.less'
export default function phoneLoginComponent(props: { trigger: boolean; form: FormInstance }) {
  const [form] = Form.useForm()
  const [countdown, setCountdown] = useState(0)
  const prefixSelector = (
    <Form.Item name="prefix" noStyle initialValue={'86'}>
      <Select>
        <Select.Option value="86">+86</Select.Option>
      </Select>
    </Form.Item>
  )
  const handleGetVerificationCode = () => {
    setCountdown(60)
  }
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
      return () => clearTimeout(timer)
    }
  }, [countdown])
  useEffect(() => {
    form.resetFields()
  }, [props.trigger])
  return (
    <div className="phone_login_page">
      <Form form={props.form} labelAlign="left">
        <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }]}>
          <Input addonBefore={prefixSelector} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item className="phone_login_fly_btn_father" rules={[{ required: true, message: '请输入验证码' }]}>
          <Form.Item
            className="phone_login_fly_btn_father"
            name="code"
            noStyle
            rules={[{ required: true, message: '请输入验证码' }]}
          >
            <Input placeholder="请输入验证码" name="code" />
          </Form.Item>
          <Button
            className="phone_login_fly_btn"
            disabled={countdown > 0}
            style={{
              color: countdown > 0 ? '#909090' : '#909090',
              width: 130,
              flexShrink: 0,
            }}
            onClick={handleGetVerificationCode}
          >
            {countdown > 0 ? countdown + 's后重新获取' : '获取验证码'}
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
